import Taro, { useRouter } from "@tarojs/taro";
import { View } from "@tarojs/components";
import { useMount } from "ahooks";

import ByRow from "@/components/ui/ByRow";
import ByIcon from "@/components/ui/ByIcon";
import ByText from "@/components/ui/ByText";
import ByButton from "@/components/ui/ByButton";
import ListView from "@/components/app/ListView";
import TodoCard from "@/components/app/TodoCard";

import useList from "@/hooks/useList";
import ApiWorkflow from "@/api/workflow";

import { TaskItem } from "@/types/global";
import Page from "@/components/common/Page";
import PageHeader from "@/components/common/PageHeader";
export default () => {
  const { params } = useRouter();
  const title = decodeURIComponent(params.title || "");
  const subtitle = decodeURIComponent(params.subtitle || "");

  const { loading, list } = useList<TaskItem>(ApiWorkflow.todos, {
    defaultParams: [
      {
        status: 0,
        intentCustomerId: Number(params.intentCustomerId),
      },
    ],
  });

  useMount(() => {
    if (title) Taro.setNavigationBarTitle({ title });
  });

  return (

    <Page
      footerSticky
      slotFooter={
        <ByRow className="flex-none px-4 py-3">
          <ByButton
            size="large"
            variant="outline"
            className="flex-1 mr-3"
            onClick={() =>
              Taro.redirectTo({
                url: `/packageProject/pages/detail/index?intentCustomerId=${params.intentCustomerId}`,
              })
            }
          >
            项目界面
          </ByButton>
          <ByButton
            size="large"
            className="flex-2"
            onClick={() => Taro.switchTab({ url: "/pages/index/index" })}
          >
            回到首页
          </ByButton>
        </ByRow>
      }
      slotHeader={
        <PageHeader title="提交成功" />
      }
    >


      <View className="p-8 text-center">
        <ByIcon className="text-success" name="CheckFill" size={140} />

        <View className="mt-8 font-bold text-lg">{title}</View>
        {
          subtitle && <View className="mt-3 text-third">{subtitle}</View>
        }
      </View>

      <View className="px-4 mt-6">
        <ByText className="mb-4" type="second" size="sm">
          本项目-我的其他待办
        </ByText>

        <ListView loading={loading} isEmpty={list.length === 0}>
          {list.slice(0, 10).map((item) => (
            <TodoCard pure source={item} key={item.id} />
          ))}
        </ListView>
      </View>

    </Page>
  );
};
